<!Doctype html>
{% load bootstrap3 %}
{% load static %}
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>Album example for Bootstrap</title>
		{% bootstrap_css %}
		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
		{% bootstrap_javascript %}
		<link rel="stylesheet" href="{% static '/summernote/summernote.css'%}">
		<script src="{% static '/summernote/summernote.min.js ' %}"></script>
		<script scr="{% static  '/summernote/lang/summernote-zh-CN.js' %}"></script>
		<script scr="{% static  '/summernote/lang/summernote-ko-KR.js' %}"></script>
	</head>

	<body>
		<header>
			<div class="container">
				{% if user.is_authenticated %}
				<div class="btn-group user_avatar_box ">
					<div class="btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">
						<img class="user_avatar" src="http://m.360buyimg.com/n12/g14/M02/06/18/rBEhVlKpd2QIAAAAAAbyizWacuwAAG0MgCWCskABvKj971.jpg%21q70.jpg">
						<span class="caret"></span>
					</div>
					<ul class="dropdown-menu">
						<li><a href="{% url 'user_info' %}">资料</a></li>
						<li><a href="{% url 'go_new_article' %}">发帖</a></li>
						<li><a href="{% url 'logout' %}">退出</a></li>
					</ul>
				</div>
				{% else %}
				<div class="btn-group user_avatar_box">
					<div class="btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">
						<img class="user_avatar" src="{%  static 'img/user_avater.jpg' %}">
						<span class="caret"></span>
					</div>
					<ul class="dropdown-menu">
						<li data-toggle="modal" data-target="#myModal"><a href="#">登录</a></li>
						<li ><a href="{% url 'to_register' %}">注册</a></li>
					</ul>
				</div>
				{% endif %}
			</div>
		</header>
		<main>
			<div class="container">
				{% block content %} {% endblock content %}
			</div>
		</main>


		<!--登录公共表单-->
		<form action="{% url 'login'%}" method="POST">
			{% csrf_token%}
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
				<div class="modal-dialog modal-sm" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
							<h4 class="modal-title" id="myModalLabel">请登录</h4>
						</div>
						<div class="modal-body">
							<div class="input-group">
								<span class="input-group-addon" id="basic-addon1">姓名</span>
								<input type="text" class="form-control" name="username" placeholder="请输入名字" aria-describedby="basic-addon1">
							</div>
							<div class="input-group" style="padding-top:20px">
								<span class="input-group-addon" id="basic-addon2">密码</span>
								<input type="password" class="form-control" name="password" placeholder="请输入你的密码" aria-describedby="basic-addon2">
							</div>
						</div>
						<div class="modal-footer">
							<input type="submit" class="btn btn-primary" value="登录"></input>
                            <a href="{% url 'to_register' %}"><input type="button" class="btn btn-primary" value="注册"></a>
						</div>
					</div>
				</div>
			</div>
		</form>
		<!--公共表单结束-->
		<footer>
		 <div>我不知道些神马 </div>
		</footer>
	</body>
	<style>
		.user_avatar {
			display: inline-block;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			margin-right: 10px;
			background-size: cover;
			vertical-align: middle;
		}

		.user_avatar_box {
			float: right
		}

		.open>.dropdown-menu,
		.dropdown-menu {
			min-width: 90px;
			text-align: center;
		}
	</style>

	<script>
		$('#summernote').summernote({
        height: 300,                 // set editor height
		minHeight: 400,             // set minimum height of editor
		maxHeight: 400,             // set maximum height of editor
		focus: true,
		lang: 'ko-KR' // default: 'en-US'
      });
	</script>
</html>